<template>
  <div>
    <div v-for="(item, index) in group" :key="index" class="more-input">
      <el-input
        v-model="group[index].value"
        :disabled="disabled"
        clearable
        :maxlength="['mobile', 'qq'].includes(field) ? 20 : 50"
        placeholder="请输入内容"
      />
      <el-input
        v-model="group[index].memo"
        :disabled="disabled"
        clearable
        placeholder="请输入备注"
        style="margin-left: 20px"
      />
      <div v-show="!disabled && !onlyReade">
        <span
          v-if="group && group.length && index === 0"
          class="el-icon-circle-plus-outline"
          @click="add"
        ></span>
        <span
          v-else
          class="el-icon-remove-outline"
          @click="remove(index)"
        ></span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 可添加多个的输入框
 */
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
@Component({
  name: 'MoreInput'
})
export default class MoreInput extends Vue {
  [x: string]: any
  @Prop({ default: () => [{}] }) private group
  @Prop({ default: () => false }) private disabled
  @Prop() private field
  @Prop({ default: false }) private onlyReade
  // private group: any = [{}]

  private remove (index) {
    this.group.splice(index, 1)
  }

  private add () {
    if (this.group && this.group.length > 9) {
      return this.$message.error('最多允许添加10个')
    }
    this.group.push({})
  }

  // public init () {
  //   this.$set(this, 'group', this.value)
  // }

  // private mounted () {
  //   this.$set(this, 'group', this.value)
  // }

  // @Watch('group', { immediate: true, deep: true })
  // private updateValue (val) {
  //   this.$emit('update:value', this.group.filter(v => v.value))
  // }
}
</script>

<style lang="stylus" scoped>
.more-input
  display flex
  align-items center
  span
    cursor pointer
    margin-left 6px
</style>
